import React, { useEffect, useState } from 'react'
import { Switch } from 'antd-mobile'
import style from '../../css/setting/Privilege.module.css'
import { NavBar} from "antd-mobile";
import { useNavigate } from 'react-router-dom';
import { getLogin,getEdit } from '../../api/index';
export default function Privilege() {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1);
      };
      const [user,setUser] = useState({})
      const [flag,setFlag] = useState({})
      const [privileges,setPrivileges] = useState([])
        useEffect(()=>{
          let userid = JSON.parse(localStorage.getItem('user')).id
          getLogin().then(res=>{
            let obj = res.data.find(item => item.id == userid)
            setUser(obj)
            setPrivileges(JSON.parse(obj.privilege))
          })
        },[flag])
  return (
    <>
     <NavBar onBack={back}>系统权限</NavBar>
     <div className={style.priTit}>为向您提供更好的用户体验，闲鱼在特定场景可能需要向您申请以下手机系统权限。</div>
     <div className={style.switchBox}>
        <div className={style.Switchleft}>
            <p>允许闲鱼访问位置信息权限</p>
            <span>为您提供附近的鱼塘、商品及房源等</span>
        </div>
        <div className={style.Switchright}>
        <Switch
          checked={privileges[0]}
          style={{
            '--checked-color': '#27D1D5',
            '--height': '36px',
            '--width': '60px',
          }}
          onChange={(e)=>{
            if (e) {
              let arr = JSON.parse(user.privilege)
              arr.splice(0,1,true)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }else{
              let arr = JSON.parse(user.privilege)
              arr.splice(0,1,false)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }
          }}
        />
        </div>
     </div>
     <div className={style.switchBox}>
        <div className={style.Switchleft}>
            <p>允许闲鱼访问相册权限</p>
            <span>帮助您实现图片和文件的保存和读取</span>
        </div>
        <div className={style.Switchright}>
        <Switch
          checked={privileges[1]}
          style={{
            '--checked-color': '#27D1D5',
            '--height': '36px',
            '--width': '60px',
          }}
          onChange={(e)=>{
            if (e) {
              let arr = JSON.parse(user.privilege)
              arr.splice(1,1,true)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }else{
              let arr = JSON.parse(user.privilege)
              arr.splice(1,1,false)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }
          }}
        />
        </div>
     </div>
     <div className={style.switchBox}>
        <div className={style.Switchleft}>
            <p>允许闲鱼访问麦克风权限</p>
            <span>为您提供语音购物或联系客服服务</span>
        </div>
        <div className={style.Switchright}>
        <Switch
          checked={privileges[2]}
          style={{
            '--checked-color': '#27D1D5',
            '--height': '36px',
            '--width': '60px',
          }}
          onChange={(e)=>{
            if (e) {
              let arr = JSON.parse(user.privilege)
              arr.splice(2,1,true)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }else{
              let arr = JSON.parse(user.privilege)
              arr.splice(2,1,false)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }
          }}
        />
        </div>
     </div>
     <div className={style.switchBox}>
        <div className={style.Switchleft}>
            <p>允许闲鱼访问通讯录权限</p>
            <span>方便您添加手机通讯录朋友并分享宝贝</span>
        </div>
        <div className={style.Switchright}>
        <Switch
          checked={privileges[3]}
          style={{
            '--checked-color': '#27D1D5',
            '--height': '36px',
            '--width': '60px',
          }}
          onChange={(e)=>{
            if (e) {
              let arr = JSON.parse(user.privilege)
              arr.splice(3,1,true)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }else{
              let arr = JSON.parse(user.privilege)
              arr.splice(3,1,false)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }
          }}
        />
        </div>
     </div>
     <div className={style.switchBox}>
        <div className={style.Switchleft}>
            <p>允许闲鱼访问相机权限</p>
            <span>为您提供更便捷的发布音视频内容等</span>
        </div>
        <div className={style.Switchright}>
        <Switch
          checked={privileges[4]}
          style={{
            '--checked-color': '#27D1D5',
            '--height': '36px',
            '--width': '60px',
          }}
          onChange={(e)=>{
            if (e) {
              let arr = JSON.parse(user.privilege)
              arr.splice(4,1,true)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }else{
              let arr = JSON.parse(user.privilege)
              arr.splice(4,1,false)
              getEdit({id:user.id,privilege:JSON.stringify(arr)}).then(res=>{
                if (res.code == 200) {
                  setFlag({})
                }
              })
            }
          }}
        />
        </div>
     </div>
    </>
  )
}
